<template>
	<view>
		<uni-status-bar></uni-status-bar>
		<view class="d-flex a-center j-sb py-2 px-3">
			<view class="iconfont icon-shanchu1"
			@click="goBack"></view>
			<view class="font-md" @click="forget">忘记密码</view>
		</view>
		
		<view class="p-5">
			<view class="font-big mb-5">密码登录</view>
			<input type="text"  placeholder="请输入手机号" class="border-bottom mb-4  "
			 @focus="myFocus('username')" @blur="myBlur('username')"
			 :class="focus.username ? 'input-border-color' : ''"
			 v-model="username"/>
			<input type="text"  placeholder="请输入密码" class="border-bottom mb-4  " 
			@focus="myFocus('password')" @blur="myBlur('password')"
			:class="focus.password ? 'input-border-color' : '' "
			v-model="password"/>
			<view class="py-2 w-100 d-flex a-center j-center main-bg-color text-white rounded font-md mb-4"
			hover-class="main-bg-hover-color"
			@click="submit">登录</view>
			<label @click="check = !check">
				<checkbox :checked="check" />
				<text class="text-light-muted font">已阅读并同意小米用户协议</text>
			</label>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "@/components/uni-ui/uni-status-bar/uni-status-bar.vue"
	export default {
		components: {
			uniStatusBar,
		},
		data() {
			return {
				focus: {
					username: false,
					password: false
				},
				username: "",
				password: "",
				check: false,
				
				//验证规则
				rules: {
					username: [
						{
							rule: /^[a-zA-Z]\w{5,17}$/,
							msg: "账号: 以字母开头，长度6-18位，只能包含字母、数字、下划线"
						}
					],
					password: [
						{
							rule: /^.{5,20}$/,
							msg: "密码: 长度5-20的所有字符"
						}
					]
				}
			}
		},
		methods: {
			//表单验证的方法
			validate(key) {
				var check = true
				this.rules[key].forEach(v => {
					//验证失败
					if(!(v.rule).test(this[key])) {
						uni.showToast({
							title: v.msg,
							icon:"none"
						});
						check = false
						return false
					}
				})
				return check
			},
			
			//提交表单
			submit() {
				if (!this.check) {
					return uni.showToast({
						title: '请先勾选同意小米协议',
						icon: 'none'
					});
				}
				if (!this.validate('username')) return
				if (!this.validate('password')) return
				console.log('提交成功')
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
				}, 2000)
			},
			
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			forget() {
				
			},
			
			myFocus(key) {
				this.focus[key] = true
			},
			
			myBlur(key) {
				this.focus[key] = false
			}
		}
	}
</script>

<style>

</style>
